<template>
    <div class="listItem">
        <div class="list_item">
                <div class="title">
                    <el-row>
                        <el-col :span="5"><h2>{{item.title}}</h2></el-col>
                        <el-col :span="3"><div class="grid-content">作者：{{item.author}}</div></el-col>
                        <el-col :span="16"><div class="grid-content time">{{item.time}}</div></el-col>
                    </el-row>
                </div>
                <div class="content">
                    {{item.content}}
                </div>
            </div>
    </div>
</template>

<script>
    export default {
        name:'ListItem',
        props:['item'],
        data() {
            return {
                
            }
        },
        filters:{
            filterDate:(d)=>{
               if(!d) return false;
               return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
            }
        },
    }
</script>

<style scoped lang='scss'>
    .list_item{
         box-shadow: 0px 0px 22px -4px #333;
         border-radius: 7px;
         background: #ffffff;
         padding: 10px;
         margin-bottom: 20px;
         .title{
             height: 40px;
             line-height: 40px;
             h2{
                 height: 100%;
                 padding: 0px;
                 margin: 0px;
             }
             .time{
                 text-align: end;
                 padding-right:30px; 
             }
         }
         .content{
             text-indent: 40px;
             height: 90px;
             overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
             line-height: 30px;
             cursor: pointer;
             text-align: start;
         }
     }
</style>